const path = require('path')

const HTMLWebpackPlugin = require('html-webpack-plugin')
//webpack中所有的配置信息
module.exports = {
    //指定入口文件
    entry:"./src/index.ts",

    //指定打包文件所在目录
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },

    //指定打包时使用模块
    module:{
        rules:[{
            test:/\.ts$/,
            use:[{
                loader:"babel-loader",
                options:{
                    //设置预定义的环境
                    presets:[[
                        //制定环境的插件
                        "@babel/preset-env",
                        //配置信息
                        {
                            //要兼容的目标浏览器
                            targets:{
                                "chrome":"88"
                            },
                            "corejs":"3",
                            "useBuiltIns":'usage'
                        }
                    ]]
                }
            },
                'ts-loader'],
            exclude:/node-modules/
        },
        //设置less文件处理
        {
            test:/\.less$/,
            use:[
                "style-loader",
                "css-loader",
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            plugins:[
                                [
                                    "postcss-preset-env",
                                    {
                                        browsers:'last 2 versions'
                                    }
                                ]
                            ]
                        }
                    }
                },
                "less-loader"
            ]
        }
    ]
    },

    plugins: [
        //打包时生成一个html页面（且自动引入js文件）
        new HTMLWebpackPlugin({
            template: 'src/index.html'
        }),
    ],

    //用来设置引用模块，即哪些文件可以被import
    resolve:{
        extensions:['.ts','.js']
    }
}